@use "~@/assets/style/color.scss"as color;

// 流体容器
@mixin fluidContainer {
  width: stretch;
}

// 容器
@mixin container {
  width: 1200px;
  margin: auto;

  @media screen and (max-width: 1200px) {
    width: stretch;
  }
}

// 更多
@mixin more() {
  font-size: 18px;
  color: color.$base;
  display: block;
  width: fit-content;
  margin: auto;

  padding-right: 18px;
  background-image: url("~@/assets/image/publice/ic_right.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;

  @media screen and (max-width: 1200px) {
    font-size: rpx(16);
    padding-right: rpx(18);
    background-size: rpx(12);
  }
}

// 16:9 传宽度
@mixin scale($value) {
  width: $value;
  height: calc(#{$value} / 16 * 9);
  display: block;
  object-fit: cover;
}

// 3:4 传宽度
@mixin scale3($value) {
  width: $value;
  height: calc(#{$value} / 3 * 4);
  display: block;
  object-fit: cover;
}

// rpx
@function rpx($value) {
  @return calc(#{$value} / 7.5 * 1vw);
}

@function wpx($value) {
  // @return calc(#{$value} / 19.2 * 1vw);
  @return calc(#{$value} * 1px);
}

//16:9 传宽度
@function scale($value) {
  @return calc(#{$value} / 16 * 9 * 1px);
}


// rpx
@function hpx($value) {
  @return calc(#{$value} / 10.8 * 1vh);
}

// 标题
@mixin title($line:1) {
  font-size: 18px;

  @media screen and (max-width: 1200px) {
    font-size: rpx(18);
  }

  font-weight: bold;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

// 描述
@mixin describe($line:0) {
  font-size: 16px;
  color: #939393;


  @media screen and (max-width: 1200px) {
    font-size: rpx(16);
  }

  @if $line !=0 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    overflow: hidden;
  }

  white-space: pre-wrap;

}




// 封面
@mixin cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

// 图标
@mixin icon {
  display: block;
  object-fit: contain;
}

// 省略
@mixin ellipsis($line:1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

@mixin scroll {

  @media screen and (min-width: 1200px) {
    scroll-behavior: smooth;

    /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 6px;
      height: 16px;
      background-color: #f5f5f5;
    }

    /*定义滚动条轨道
内阴影+圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 3px #f5f5f5;
      border-radius: 3px;
      background-color: #f5f5f5;
    }

    /*定义滑块
内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 3px #EF7800;
      background-color: #EF7800;
    }


  }

  @media screen and (max-width: 1200px) {

    /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: rpx(6);
      height: rpx(16);
      background-color: #f5f5f5;
    }

    /*定义滚动条轨道
内阴影+圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 rpx(3) #f5f5f5;
      border-radius: rpx(3);
      background-color: #f5f5f5;
    }

    /*定义滑块
内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: rpx(3);
      -webkit-box-shadow: inset 0 0 rpx(3) #EF7800;
      background-color: #EF7800;
    }


  }

}